<template>
  <div class="todo-main">
    <!-- <transition-group name="todo" appear> -->
      <!-- 这里一定要使用transition-group 因为这里是在遍历 有多个item -->
      <Item v-for="todo in todos" :key="todo.id" :todo="todo" ></Item>
    <!-- </transition-group> -->
  </div>
</template>

<script>
import Item from './Item.vue'
export default {
  name: 'List',
  props: ['todos'],
  components: {
    Item
  },
  /* beforeCreate() {
    // 这个时候是拿不到todos
    console.log('created', 'List this', this, 'list todos', this.todos)
  },
  created() {
    console.log('created', 'List this', this, 'list todos', this.todos)
    this.todos.pop()
  },
  beforeMount() {
    console.log('mounted', 'List this', this, 'list todos', this.todos)
  },
  mounted() {
    console.log('mounted', 'List this', this, 'list todos', this.todos)
  }, */
}
</script>

<style scoped>
/*main*/
	.todo-main {
		margin-left: 0px;
		border: 1px solid #ddd;
		border-radius: 2px;
		padding: 0px;
	}

	.todo-empty {
		height: 40px;
		line-height: 40px;
		border: 1px solid #ddd;
		border-radius: 2px;
		padding-left: 5px;
		margin-top: 10px;
	}
  .todo-enter-active {
		animation: todoTransition 0.5s linear;
	}
	.todo-leave-active {
		animation: todoTransition 0.5s linear reverse;
	}
	@keyframes todoTransition {
		from {
			transform: translateX(100%);
		}
		to {
			transform: translateX(0px);
		}
	}
</style>